<template>
  <div class="content-area">
    <div class="task-list-container">
      <div class="search-filter-bar">
        <el-input 
          v-model="searchQuery" 
          placeholder="搜索任务名称" 
          clearable
          style="width: 200px"
        />
        <el-select 
          v-model="selectedType" 
          placeholder="选择任务类型" 
          clearable
          style="width: 150px"
        >
          <el-option label="视频" value="视频" />
          <el-option label="文档" value="文档" />
        </el-select>
        <el-select 
          v-model="selectedStatus" 
          placeholder="选择处理状态" 
          clearable
          style="width: 150px"
        >
          <el-option label="等待" value="等待" />
          <el-option label="完成" value="完成" />
        </el-select>
      </div>

      <el-table 
        ref="taskTable"
        :data="paginatedTasks"
        border
        style="width: 100%"
        class="full-height-table"
      >
        <el-table-column prop="taskName" label="任务名称" align="center" />
        <el-table-column prop="taskType" label="任务类型" align="center" />
        <el-table-column prop="entryPoint" label="开始时间" align="center" />
        <el-table-column prop="exitPoint" label="结束时间" align="center" />
        <el-table-column prop="processStatus" label="处理状态" align="center">
          <template #default="scope">
            <el-tag
              :type="scope.row.processStatus === '等待' ? 'warning' : 'success'"
            >
              {{ scope.row.processStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="approveStatus" label="审核状态" align="center">
          <template #default="scope">
            <el-tag
              :type="scope.row.approveStatus === '待审核' ? 'warning' : 'success'"
            >
              {{ scope.row.approveStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button 
              size="mini" 
              type="text" 
              style="color: #924d4dff"
              @click="handlePreview(scope.row)"
            >
              预览
            </el-button>
            <el-button
              v-if="scope.row.processStatus === '完成'"
              size="mini"
              type="text"
              style="color: #67c23a"
              @click="handleDownload(scope.row)"
            >
              下载
            </el-button>
            <el-button
              size="mini"
              type="text"
              style="color: #ff0000ff"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          :total="filteredTasks.length"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from "vue";
import { taskList } from "../mock/tasks";
import { ElMessageBox, ElMessage } from "element-plus";

const searchQuery = ref("");
const selectedType = ref("");
const selectedStatus = ref("");

const currentPage = ref(1);
const pageSize = ref(10);
const taskTable = ref(null);

const previewDialog = ref(false);
const currentTask = ref(null);

const filteredTasks = computed(() => {
  return taskList.value.filter((task) => {
    const matchSearch = !searchQuery.value || task.taskName.includes(searchQuery.value);
    const matchType = !selectedType.value || task.taskType === selectedType.value;
    const matchStatus = !selectedStatus.value || task.processStatus === selectedStatus.value;
    return matchSearch && matchType && matchStatus;
  });
});

const paginatedTasks = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredTasks.value.slice(start, end);
});

const handleSizeChange = (val) => {
  pageSize.value = val;
  adjustTableHeight();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const adjustTableHeight = () => {
  nextTick(() => {
    if (taskTable.value) {
      const windowHeight = window.innerHeight;
      const searchHeight = document.querySelector(".search-filter-bar")?.offsetHeight || 0;
      const paginationHeight = 60; 
      const tableHeight = windowHeight - searchHeight - paginationHeight - 120;
      const maxTableHeight = windowHeight * 0.7; 
      taskTable.value.layout.setHeight(Math.min(tableHeight, maxTableHeight));
    }
  });
};

window.addEventListener("resize", adjustTableHeight);
adjustTableHeight();

const handlePreview = (task) => {
  currentTask.value = task;
  previewDialog.value = true;
  ElMessage.info(`预览任务: ${task.taskName}`);
};


const handleDownload = (task) => {
  ElMessage.success(`开始下载任务: ${task.taskName}`);
};

const handleDelete = (taskId) => {
  ElMessageBox.confirm("确定删除这条任务吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    taskList.value = taskList.value.filter(task => task.id !== taskId);
    ElMessage.success("删除成功");
  }).catch(() => {
    ElMessage.info("已取消删除");
  });
};
</script>

<style scoped>
.content-area {
  flex: 1;
  padding: 20px;
  background-color: #262734;
  overflow-y: auto;
  box-sizing: border-box;
}

.task-list-container {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden; 
}


.search-filter-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  background-color: #262734;
  padding: 15px;
  border-radius: 4px;
}


::v-deep .el-input__inner,
::v-deep .el-select__inner {
  background-color: #1a1b2a !important;
  border-color: ##1f202d !important;
  color: #e0e0e0 !important; /* 从黑色改为浅灰色，提高可读性 */
}


::v-deep .el-select-dropdown {
  background-color: #1f202d !important;
  border-color: ##1f202d !important;
}

::v-deep .el-select-dropdown__item {
  color: #e0e0e0 !important; /* 下拉选项文字颜色优化 */
}

::v-deep .el-select-dropdown__item:hover {
  background-color: #1f202d !important; /* 从红色改为深灰色，更适配主题 */
}

.full-height-table {
  width: 100%;
  overflow: auto; 
}


.pagination-wrapper {
  margin-top: 10px; 
  display: flex;
  justify-content: center; 
  align-items: center;
  padding: 10px 0; 
  background-color: #1f202d;
  border-radius: 4px;
}


::v-deep .el-pagination button,
::v-deep .el-pagination span:not([class*='el-icon']),
::v-deep .el-pagination__sizes select {
  color: #1f202d !important; /* 从暗红色改为浅灰色，更清晰 */
}

::v-deep .el-pagination__sizes select {
  background-color: #1a1b2a !important;
  border-color: ##1f202d !important;
}


::v-deep .el-table {
  background-color: #1f202d;
}


::v-deep .el-table__row {
  background-color: #1f202d;
}

::v-deep .el-table td {
  color: #e0e0e0 !important; /* 表格内容文字颜色，数字更清晰 */
  border-bottom-color: #1f202d !important;
}


::v-deep .el-table th {
  background-color: #eb0c0cff;
  color: #ff0000ff !important; /* 表头文字更亮 */
  font-weight: 500;
}


::v-deep .el-table--border,
::v-deep .el-table--group {
  border-color: #1f202d !important;
}

::v-deep .el-table--border th,
::v-deep .el-table--border td {
  border-right-color: #1f202d !important;
}


::v-deep .el-table__row:hover > td {
  background-color: #1f202d  !important; /* 悬停时轻微变色，保持可读性 */
}
</style>
